<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="webroot" value="${pageContext.request.contextPath}" />
<script type="text/javascript"
	src="${webroot}/static/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
	src="${webroot}/static/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="${webroot}/static/js/bootstrap-table.js"></script>
<script type="text/javascript"
	src="${webroot}/static/js/app-common-2.00.0.js"></script>
<script type="text/javascript" src="${webroot}/static/js/layer/layer.js"></script>
<script src="${webroot}/static/js/jquery.form.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css"
	href="${webroot}/static/js/layer/skin/layer.css" />
<link rel="stylesheet" type="text/css"
	href="${webroot}/static/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="${webroot}/static/css/bootstrap-table.min.css" />
<link rel="stylesheet" type="text/css" href="${webroot}/static/css/forms.css" />
<html lang="en">
<head>
<style type="text/css">
label {
    width: 80px;
}
</style>
</head>
<body>
	<div>
		<div id="main" style="width: 600px;height:400px;"></div>
	</div>
</body>
<script type="text/javascript" src="${webroot}/static/js/echarts.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
app.title = '坐标轴刻度与标签对齐';
option = {
    color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '5%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['0:00 - 6:00', '6:00 - 12:00', '12:00 - 18:00', '18:00 - 24:00'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    
    yAxis: {
        min:0,
        max:18,
        axisLabel:{
            formatter: function (value) {
			var texts = [];
			if(value==0){
			texts.push('0');
			}
			else if (value <=3) {
			texts.push('2');
			}
			else if (value<= 6) {
			texts.push('4');
			}
			else if(value<= 9){
			texts.push('6');
			}
			else if(value<= 12){
			texts.push('8');
			}
			else if(value<= 14){
			texts.push('10');
			}
			else if(value<= 16){
			texts.push('12');
			}
			else{
			texts.push('14');
			}
			return texts;
			
			}
		  }
        },
    series : [
        {
            name:'直接访问',
            type:'bar',
            barWidth: '60%',     
            data:[6, 4, 8, 5]
        }
    ]
};
myChart.setOption(option);
</script>
</html>